<template>
	<view>
		<view v-if="data_list.length > 0" class="plugins-classinfo-list oh">
			<block v-if="index_list_style == 1">
				<view v-for="(item, index) in data_list" :key="index" class="item oh padding-main bg-white br-b">
					<view :data-value="item.url" @tap="url_event" :class="(item.cover != '' && config.is_home_show_pic == 1) ? 'havepic pr' : 'nothavepic'">
						<view v-if="item.cover != '' && config.is_home_show_pic == 1" class="classinfo-box pa">
							<image class="classinfo-img radius" :src="item.cover" mode="aspectFill"></image>
						</view>
						<view class="base">
							<view class="classinfo-list-title-box flex-row single-text">
								<view class="classinfo-list-goods-name cr-white border-radius-sm" :style="'background:'+diytheme_data.second_color+';'" v-if="item.is_recommended == 1">{{$t('fengcheche.classinfo.tuijian')}}</view>
								<view class="classinfo-list-goods-name cr-white border-radius-sm" :style="'background:'+diytheme_data.second_color+';'" v-if="item.is_top == 1">{{$t('fengcheche.classinfo.zhiding')}}</view>
								<view class="classinfo-list-goods-name cr-white border-radius-xs" :style="'background:'+diytheme_data.main_color+';'">{{ item.goods_name }}</view>
								<view class="single-text">{{ item.title }}</view> 
							</view> 
							<view v-if="(item.label_arr || null) != null && item.label_arr.length > 0" class="label_box margin-top-sm">
								<block v-for="(item2, index2) in item.label_arr" :key="index2">
									<view :class="'fl label-item label-item'+index2">{{item2}}</view>
								</block>
								<view class="cl"></view>
							</view>
							<view v-if="(item.goods_info.field_list || null) != null && item.goods_info.field_list.length > 0" class="shuxing-box margin-top-sm">
								<block v-for="(item2, index2) in item.goods_info.field_list" :key="index2">
									<view v-if="(item2.type == 1 || item2.type == 3 || item2.type == 4 || item2.type == 5 || item2.type == 6 || item2.type == 7 || item2.type == 8) && item2.default_value !=''" class="flex-row shuxing-line">
										<view class="dis-inline cr-red">{{item2.name}}：</view>
										<view class="dis-inline cr-black"><rich-text :nodes="item2.default_value+item2.unit"></rich-text></view>
									</view>
								</block>
							</view>
							<view v-if="item.goods_info.field_list.length > 3" class="cr-gray shenglue-line">···</view>
							<view class="cr-base text-size-sm multi-text margin-top-sm">{{ item.describe }}</view>
							<view class="cr-grey margin-top-sm text-size-sm"><text v-if="config.is_info_show_num == 1" class="fr">{{ item.access_count }}{{$t('detail.detail.e6ga1y')}}</text>{{ item.add_time_date_cn }}</view>
						</view>
					</view>
				</view>
				<view class="cl"></view>
			</block>
			<block v-else-if="index_list_style == 2">
				<view v-for="(item, index) in data_list" :key="index" class="listing-card">
					<view :style="((item.is_over || null) != null && item.is_over == 1) ? 'background:url('+mini_url+'mini/over.png) no-repeat right 10px;background-size:200rpx auto;' : ''">
						<view class="classinfo-list-title-box flex-row single-text margin-bottom" :data-value="item.url" @tap="url_event">
							<view class="classinfo-list-goods-name cr-white border-radius-sm" :style="'background:'+diytheme_data.second_color+';'" v-if="item.is_recommended == 1">{{$t('fengcheche.classinfo.tuijian')}}</view>
							<view class="classinfo-list-goods-name cr-white border-radius-sm" :style="'background:'+diytheme_data.second_color+';'" v-if="item.is_top == 1">{{$t('fengcheche.classinfo.zhiding')}}</view>
							<view class="classinfo-list-goods-name cr-white border-radius-xs" :style="'background:'+diytheme_data.main_color+';'">{{ item.goods_name }}</view>
							<view class="single-text">{{ item.title }}</view>
							<view v-if="((item.distance || null) != null && item.distance != '0')" class="cr-gray">{{ item.distance }}</view>
						</view>
						<view v-if="(item.goods_info.field_list || null) != null && item.goods_info.field_list.length > 0" class="shuxing-box margin-top-sm" :data-value="item.url" @tap="url_event">
							<block v-for="(item2, index2) in item.goods_info.field_list" :key="index2">
								<view v-if="(item2.type == 1 || item2.type == 3 || item2.type == 4 || item2.type == 5 || item2.type == 6 || item2.type == 7 || item2.type == 8) && item2.default_value !=''" class="flex-row shuxing-line">
									<view class="dis-inline cr-red">{{item2.name}}：</view>
									<view class="dis-inline cr-black"><rich-text :nodes="item2.default_value+item2.unit"></rich-text></view>
								</view>
							</block>
						</view>
						<view v-if="item.goods_info.field_list.length > 3" class="cr-gray shenglue-line">···</view>
						<view class="listing-description" :class="((item.is_quanwen || null) != null && item.is_quanwen == 1) ? 'spacing-mb' : 'multi-text'" :data-value="item.url" @tap="url_event">{{ item.describe }}</view>
						<block v-if="item.describe_length > 32">
							<view class="quanwen" v-if="(item.is_quanwen || null) == null || ((item.is_quanwen || null) != null && item.is_quanwen == 0)" @tap="qiehuan_quanwen(index, 1)">{{$t('fengcheche.classinfo.quanwen')}}</view>
							<view class="quanwen" v-else @tap="qiehuan_quanwen(index, 0)">{{$t('fengcheche.classinfo.shouqi')}}</view>
						</block>
						<view v-if="config.is_home_show_pic == 1 && (item.images_view_arr || null) != null && item.images_view_arr.length > 0" class="image-grid">
							<image v-for="(img, imgIndex) in item.images_view_arr" :key="imgIndex" :src="img" mode="aspectFill" @tap="upload_show_event(index, imgIndex)"></image>
						</view>
						<view v-if="(item.label_arr || null) != null && item.label_arr.length > 0" class="badge-container">
							<block v-for="(item2, index2) in item.label_arr" :key="index2">
								<view :class="'fl badge badge'+index2">{{item2}}</view>
							</block>
							<view class="cl"></view>
						</view>
						<view class="listing-footer">
							<text class="listing-date">{{ item.add_time_date_cn }}</text>
							<text class="listing-views" v-if="config.is_info_show_num == 1">{{ item.access_count }}{{$t('detail.detail.e6ga1y')}}</text>
						</view>
						<view v-if="((item.goods_info.is_allow_see_tel || null) != null && item.goods_info.is_allow_see_tel == 1 && item.goods_info.is_see_phone == 0 && item.contact_tel != '') || ((config.is_classinfo_comments_add || null) != null && config.is_classinfo_comments_add == 1) || (item.user_company_id > 0 && item.user_card_id > 0 && (config.is_infolist_show_card || null) != null && config.is_infolist_show_card == 1)" class="dadianhua">
							<view v-if="item.user_company_id > 0 && item.user_card_id > 0 && (config.is_infolist_show_card || null) != null && config.is_infolist_show_card == 1" class="tel_btn" @tap="url_event" :data-value="'/pages/fcc/classinfo/companycard-detail/companycard-detail?id=' + item.user_card_id">
								<uni-icons type="flag" size="12" color="#ffffff"></uni-icons>
								{{$t('fengcheche.classinfo.seecarditem')}}
							</view>
							<view v-if="(item.goods_info.is_allow_see_tel || null) != null && item.goods_info.is_allow_see_tel == 1 && item.goods_info.is_see_phone == 0 && item.contact_tel != ''" class="tel_btn" @tap="call_event" :data-value="item.contact_tel">
								<uni-icons type="phone-filled" size="12" color="#ffffff"></uni-icons>
								{{$t('order.order.7dxbm5')}}
							</view>
							<view v-if="(config.is_classinfo_comments_add || null) != null && config.is_classinfo_comments_add == 1" class="pinglun_btn" :data-value="'/pages/fcc/classinfo/comments/comments?id=' + item.id" @tap="url_event">
								<uni-icons type="chat" size="23" color="#999999"></uni-icons>
							</view>
						</view>
						<view v-if="(config.is_classinfo_comments_show_list || null) != null && config.is_classinfo_comments_show_list == 1 && (item.comments_list || null) != null && item.comments_list.length > 0" class="ping_list margin-top">
							<view v-for="(item2, index2) in item.comments_list" :key="index2">
								<view class="single-text">
									<text class="t1">{{item2.user.user_name_view}}：</text>
									<text class="t2">{{item2.content}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cl"></view>
			</block>
		</view>
		<!-- #ifdef APP-PLUS -->
		<yk-authpup ref="authpup" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></yk-authpup>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp();
	// #ifdef APP-PLUS
	import ykAuthpup from "@/components/yk-authpup/yk-authpup";
	// #endif
	
	var mini_url = app.globalData.get_static_url('classinfo', true);
	export default {
		name:"tj-classinfo-list",
		data() {
			return {
				mini_url: mini_url,
				config: {},
				data_list: [],
				index_list_style: 2,
				diytheme_data: null,
				permissionID:'',
				share_info: {},
			};
		},
		props: {
			propCurrencySymbol: {
				type: [String],
				default: app.globalData.currency_symbol()
			},
			propConfig: {
				type: [String, Object],
				default: null
			},
			propData: {
			    type: Object,
			    default: () => {
			        return {};
			    },
			},
			diyTheme: {
				type: Object,
				default: null,
			},
			propStyle: {
				type: [String, Number],
				default: 0
			}
		},
		components: {
			// #ifdef APP-PLUS
			ykAuthpup
			// #endif
		},
		// 属性值改变监听
		watch: {
			propData(value, old_value) {
			    this.init();
			}
		},
		// 页面被展示
		created: function(e) {
			this.init();
		},
		methods: {
			// 初始化
			init() {
			    var config = ((this.propConfig || null) == null ? app.globalData.get_config('plugins_base.classinfo.data') : this.propConfig) || {};
			    var data_list = ((this.propData || null) == null || (this.propData.data || null) == null || this.propData.data.length == 0) ? [] : this.propData.data;
				var index_list_style = (config.index_list_style || null) != null ? parseInt(config.index_list_style) : 2;
				if(parseInt(this.propStyle) > 0)
				{
					index_list_style = parseInt(this.propStyle);
				}
				
				var fccprouniapp_data = uni.getStorageSync('system_base_info') || null;
				var diytheme_data = this.diyTheme || null;
				if(fccprouniapp_data != null){
					if((diytheme_data || null) === null)
					{
						diytheme_data = fccprouniapp_data.base.diytheme;
					}
				}
				if(diytheme_data === null){
					diytheme_data = {
						'main_color':'#fa5d14',
						'second_color':'#fac03d',
						'ligth_color_1':'#feeaeb',
						'ligth_color_2':'#feeaeb',
						'ligth_color_deg':0,
						'price_color':'#fa5d14',
					};
				}
				var share_info_temp = {};
				if(data_list.length > 0)
				{
					var temp_share = {};
					for (var i in data_list) {
						temp_share = {
						    title: data_list[i].seo_title || data_list[i].title,
						    desc: data_list[i].seo_desc || data_list[i].describe,
						    path: '/pages/fcc/classinfo/detail/detail',
						    query: 'id=' + data_list[i].id,
						    img: data_list[i].cover,
						};
						share_info_temp[data_list[i].id] = temp_share;
					}
				}
			    this.setData({
					share_info: share_info_temp,
			    	config: config,
			    	data_list: data_list,
					index_list_style: index_list_style,
					diytheme_data: diytheme_data,
			    });
			},
			
			// 是否展开全文
			qiehuan_quanwen(index, res){
				var temp = this.data_list;
				temp[index].is_quanwen = res;
				this.setData({
					data_list: temp,
				});
			},
			
			// 电话
			call_event(e) {
				var tel = e.currentTarget.dataset.value;
				if(app.globalData.is_android())
				{
					this.permissionID = 'CALL_PHONE';
					setTimeout(()=>{
						this.$refs['authpup'].open(tel);
					},500);
				}else{
					app.globalData.call_tel(tel);
				}
			},
			
			// #ifdef APP-PLUS
			//用户授权权限后的回调
			changeAuth(e){
				// 如果是头像查看的权限返回
				if(this.permissionID == 'WRITE_EXTERNAL_STORAGE')
				{
					// 直接下载
					//app.globalData.save_image_by_url(e);
					app.globalData.image_show_event(e);
				}else{
					app.globalData.call_tel(e);
				}
			},
			// #endif
			
			// 图片预览
			upload_show_event(index, imgIndex) {
				if(app.globalData.is_android())
				{
					var self = this;
					var imglist = this.data_list[index].images_view_arr;
					uni.previewImage({
						current: imglist[imgIndex],
						urls: imglist,
						longPressActions: {
							itemList: [self.$t('fengcheche.fcctips.t9')],
							success: function(data) {
								// 先关闭预览，否则会遮挡上方权限提醒
								uni.closePreviewImage();
								self.permissionID = 'WRITE_EXTERNAL_STORAGE';
								setTimeout(()=>{
									self.$refs['authpup'].open(imglist[imgIndex]);
								},500);
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				}else{
					var imglist = this.data_list[index].images_view_arr;
					uni.previewImage({
						current: imglist[imgIndex],
						urls: imglist,
					});
				}
			},
			
			// url事件
			url_event(e) {
				app.globalData.url_event(e);
			}
		}
	}
</script>

<style>
/**
 * 分类信息 - 列表
 */
.plugins-classinfo-list .havepic{
	padding-left:220rpx;
}
.plugins-classinfo-list .havepic .classinfo-box {
	width: 200rpx !important;
	height: 200rpx !important;
	left:0;
	top:0;
}

.plugins-classinfo-list .classinfo-img {
	width:100%;
	height:100%;
}
.plugins-classinfo-list .nothavepic .base {
	width: 100%;
}
.label_box .label-item{font-size:24rpx;padding:3rpx 6rpx;border-radius: 5rpx;margin-right:6rpx;border:1px solid #39a9eb;color:#39a9eb;margin-bottom:6rpx;}
.label_box .label-item0,.label_box .label-item7,.label_box .label-item14{
	border:1px solid #39a9eb;color:#39a9eb;
}
.label_box .label-item1,.label_box .label-item8,.label_box .label-item15{
	border:1px solid #ffb268;color:#ffb268;
}
.label_box .label-item2,.label_box .label-item9,.label_box .label-item16{
	border:1px solid #4adcad;color:#4adcad;
}
.label_box .label-item3,.label_box .label-item10,.label_box .label-item17{
	border:1px solid #b597ed;color:#b597ed;
}
.label_box .label-item4,.label_box .label-item11,.label_box .label-item18{
	border:1px solid #9dd5e2;color:#9dd5e2;
}
.label_box .label-item5,.label_box .label-item12,.label_box .label-item19{
	border:1px solid #fd6261;color:#fd6261;
}
.label_box .label-item6,.label_box .label-item13,.label_box .label-item20{
	border:1px solid #6fcf4a;color:#6fcf4a;
}
.label_box2 .label-item{padding:3rpx 10rpx;font-size:20rpx;border-radius: 3rpx;margin-right:6rpx;background:#39a9eb;margin-bottom:6rpx;color:#fff;}

.cl{clear: both;}
.classinfo-list-title-box{padding-right:10rpx;}
.shuxing-box{max-height:114rpx;overflow: hidden;}
.shuxing-line{height:38rpx;line-height: 38rpx;overflow: hidden;}
.shenglue-line{line-height: 20rpx;}
.classinfo-list-goods-name{padding:2rpx 8rpx;margin-right:10rpx;}
.classinfo-list-goods-name{
	font-size:24rpx;
}
.listing-card .classinfo-list-title-box .cr-gray{
	margin-left:auto;
	color: #999;
	font-size:24rpx;
}

.listing-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.badge-container {
  margin-bottom:20rpx;
}

.badge {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  margin-right: 15rpx;
  margin-bottom: 10rpx;
}
.badge0,.badge7,.badge14{
	background-color:#e3f2fd;color:#1976d2;
}
.badge1,.badge8,.badge15{
	background-color:#fff3e0;color:#f57c00;
}
.badge2,.badge9,.badge16{
	background-color:#e8f5e9;color:#388e3c;
}
.badge3,.badge10,.badge17{
	background-color:#f3e5f5;color:#8e24aa;
}
.badge4,.badge11,.badge18{
	background-color:#e0f7fa;color:#00acc1;
}
.badge5,.badge12,.badge19{
	background-color:#efebe9;color:#6d4c41;
}
.badge6,.badge13,.badge20{
	background-color:#fce4ec;color:#d81b60;
}

.listing-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.listing-description {
  font-size: 28rpx;
  color: #666;
}

.image-grid {
  display: flex;
  margin-bottom:20rpx;
}

.image-grid image {
  width: calc(33.33333% - 15rpx);
  height: 180rpx;
  border-radius: 10rpx;
  margin-right:15rpx; 
}

.listing-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.fab {
  position: fixed;
  right: 30rpx;
  bottom: 140rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #3498db;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}

.floating-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

.floating-menu-item {
  position: fixed;
  right: 30rpx;
  bottom: 140rpx;
  background-color: #ffffff;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.floating-menu-item text {
  font-size: 20rpx;
  margin-top: 4rpx;
}

.quanwen{
	color:#666;
	margin-bottom:20rpx;
	margin-top:10rpx;
}

.dadianhua{
	margin-top:20rpx;
	display: flex;
}
.dadianhua .tel_btn{
	display: inline-block;
	background: #39a9eb;
	padding:10rpx 25rpx;
	color:#fff;
	border-radius: 25rpx;
	font-size:24rpx;
	margin-right:auto;
}

.dadianhua .pinglun_btn{
	display: inline-block;
	margin-left:auto;
}
.ping_list{
	padding-top:20rpx; 
	border-top:1px dotted #ddd;
}
.ping_list .single-text{
	margin-bottom:15rpx;
}
.ping_list .single-text .t1{
	color: #39a9eb;
}

/* 背景颜色类 */
.bg-blue { background-color: #3498db; }
.bg-green { background-color: #2ecc71; }
.bg-yellow { background-color: #f1c40f; }
.bg-purple { background-color: #9b59b6; }
.bg-pink { background-color: #e91e63; }
.bg-indigo { background-color: #3f51b5; }
.bg-red { background-color: #e74c3c; }
.bg-teal { background-color: #1abc9c; }
.bg-orange { background-color: #e67e22; }
.bg-lime { background-color: #cddc39; }
</style>